<template>
  <div class="manage">
    <el-dialog :visible.sync="pictureShow" title="">

      <el-descriptions class="margin-top" title="基本信息" :column="2" :size="size" border>

        <el-descriptions-item>
          <template slot="label">
            姓名
          </template>
          {{ staff.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            民族
          </template>
          {{ staff.ethnic }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            性别
          </template>
          {{ staff.gender }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            年龄
          </template>
          {{ staff.age }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            岗位
          </template>
          {{ staff.jobTitle }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            学位
          </template>
          {{ staff.degree }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            生日
          </template>
          {{ staff.birthday }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            毕业学校
          </template>
          {{ staff.graduateSchool }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            主修专业
          </template>
          {{ staff.professionalName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            工作时间
          </template>
          {{ staff.workTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            入路时间
          </template>
          {{ staff.roadTime }}
        </el-descriptions-item>
      </el-descriptions>
      <div id="chart" style="width: 600px; height: 400px;"></div>
    </el-dialog>
    <el-dialog
      :title="dialogForm.type === 'add' ? '新增' : '编辑'"
      :visible.sync="dialogForm.isShow"
    >
      <el-form ref="dialogForm" label-width="210px" :model="dialogForm.formData" size="mini" :rules="dialogForm.rules">
        <el-form-item label="员工姓名:" style="width:380px" prop="userName">
          <el-select v-model="selectedUser" filterable placeholder="请选择">
            <el-option
              v-for="item in userOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核月份: " style="width:380px" prop="configTime">
          <el-date-picker
            v-model="dialogForm.formData.configTime"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考核指标:" style="width:380px" prop="basicParam">
          <el-select v-model="dialogForm.formData.basicParam" placeholder="请选择" @change="getParam">
            <el-option
              v-for="item in examineOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评分标准:" style="width:380px" prop="configId">
          <el-select v-model="selectedBasic" placeholder="请选择">
            <el-option
              v-for="item in gradeOptions"
              :key="item.id"
              :label="item.configName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm.isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>

    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="handleAdd" size="mini"
      >新增 <i class="el-icon-circle-plus-outline"></i>
      </el-button>
      <el-popconfirm
        style="margin-left: 10px"
        confirm-button-text='确定'
        cancel-button-text='我再想想'
        icon="el-icon-info"
        icon-color="red"
        title="你确定删除吗？"
        @confirm="handleDeleteBatch"
      >
      </el-popconfirm>

    </div>

    <!------------------------ 搜索 ----------------------->
    <div class="manage-header">
      <el-form label-width="auto" :model="searchForm.formData"
               :inline="true" size="mini">
        <el-form-item label="考核月份" prop="name">
          <el-date-picker
            v-model="dialogForm.formData.configTime"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" size="mini">搜索 <i class="el-icon-search"/></el-button>
          <el-button type="danger" @click="reset" size="mini">重置 <i class="el-icon-refresh-left"/></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!------------------- 数据表格 ------------------->
    <div class="common-table">
      <el-table
        :data="table.tableData"
        height="85%"
        border
        stripe
        row-key="id"
        :header-cell-style="{background: '#eef1f6',color: '#606266',
        textAlign:'center',fontWeight:'bold',borderWidth:'3px'}"
        @selection-change="handleSelectionChange"
      >
        <!--        <el-table-column type="selection" width="50" align="center"/>-->
        <el-table-column prop="userName" fixed="left" label="员工姓名" min-width="80" align="center"/>
        <el-table-column prop="configTime" fixed="left" label="考核月份" min-width="120" align="center"/>
        <el-table-column prop="configName1" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate1" label="" min-width="80" align="center"/>

        <el-table-column prop="configName2" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate2" label="" min-width="80" align="center"/>

        <el-table-column prop="configName3" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate3" label="" min-width="80" align="center"/>

        <el-table-column prop="configName4" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate4" label="" min-width="80" align="center"/>

        <el-table-column prop="configName5" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate5" label="" min-width="80" align="center"/>

        <el-table-column prop="configName6" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate6" label="" min-width="80" align="center"/>

        <el-table-column prop="configName7" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate7" label="" min-width="80" align="center"/>

        <el-table-column prop="configName8" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate8" label="" min-width="80" align="center"/>

        <el-table-column prop="configName9" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate9" label="" min-width="80" align="center"/>

        <el-table-column prop="configName10" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate10" label="" min-width="80" align="center"/>

        <el-table-column prop="configName11" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate11" label="" min-width="80" align="center"/>

        <el-table-column prop="configName12" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate12" label="" min-width="80" align="center"/>

        <el-table-column prop="configName13" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate13" label="" min-width="80" align="center"/>

        <el-table-column prop="configName14" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate14" label="" min-width="80" align="center"/>

        <el-table-column prop="configName15" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate15" label="" min-width="80" align="center"/>

        <el-table-column prop="configName16" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate16" label="" min-width="80" align="center"/>

        <el-table-column prop="configName17" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate17" label="" min-width="80" align="center"/>

        <el-table-column prop="configName18" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate18" label="" min-width="80" align="center"/>

        <el-table-column prop="configName19" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate19" label="" min-width="80" align="center"/>

        <el-table-column prop="configName20" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate20" label="" min-width="80" align="center"/>

        <el-table-column prop="configName21" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate21" label="" min-width="80" align="center"/>

        <el-table-column prop="configName22" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate22" label="" min-width="80" align="center"/>

        <el-table-column prop="configName23" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate23" label="" min-width="80" align="center"/>

        <el-table-column prop="configName24" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate24" label="" min-width="80" align="center"/>

        <el-table-column prop="configName25" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate25" label="" min-width="80" align="center"/>

        <el-table-column prop="configName26" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate26" label="" min-width="80" align="center"/>

        <el-table-column prop="configName27" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate27" label="" min-width="80" align="center"/>

        <el-table-column prop="configName28" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate28" label="" min-width="80" align="center"/>

        <el-table-column prop="configName29" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate29" label="" min-width="80" align="center"/>

        <el-table-column prop="configName30" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate30" label="" min-width="80" align="center"/>

        <el-table-column prop="configName31" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate31" label="" min-width="80" align="center"/>

        <el-table-column prop="configName32" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate32" label="" min-width="80" align="center"/>

        <el-table-column prop="configName33" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate33" label="" min-width="80" align="center"/>

        <el-table-column prop="configName34" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate34" label="" min-width="80" align="center"/>

        <el-table-column prop="configName35" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate35" label="" min-width="80" align="center"/>

        <el-table-column prop="configName36" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate36" label="" min-width="80" align="center"/>

        <el-table-column prop="configName37" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate37" label="" min-width="80" align="center"/>

        <el-table-column prop="configName38" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate38" label="" min-width="80" align="center"/>

        <el-table-column prop="configName39" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate39" label="" min-width="80" align="center"/>

        <el-table-column prop="configName40" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate40" label="" min-width="80" align="center"/>

        <el-table-column prop="configName41" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate41" label="" min-width="80" align="center"/>

        <el-table-column prop="configName42" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate42" label="" min-width="80" align="center"/>

        <el-table-column prop="configName43" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate43" label="" min-width="80" align="center"/>

        <el-table-column prop="configName44" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate44" label="" min-width="80" align="center"/>

        <el-table-column prop="configName45" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate45" label="" min-width="80" align="center"/>

        <el-table-column prop="configName46" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate46" label="" min-width="80" align="center"/>

        <el-table-column prop="configName47" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate47" label="" min-width="80" align="center"/>

        <el-table-column prop="configName48" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate48" label="" min-width="80" align="center"/>

        <el-table-column prop="configName49" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate49" label="" min-width="80" align="center"/>

        <el-table-column prop="configName50" label="" min-width="80" align="center"/>
        <el-table-column prop="configRate50" label="" min-width="80" align="center"/>

        <el-table-column label="操作" width="280" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
            >详情 <i class="el-icon-edit"></i
            ></el-button>
            <el-popconfirm
              style="margin-left:10px;margin-right:10px"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="你确定删除吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button size="mini" type="danger" slot="reference"
              >删除 <i class="el-icon-remove-outline"></i
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pager"
        layout="total,sizes,prev,pager,next,jumper"
        :page-size="table.pageConfig.size ? table.pageConfig.size : 10"
        :page-sizes="[5, 10, 15, 20]"
        :total="table.pageConfig.total"
        :current-page.sync="table.pageConfig.current"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getList
} from '../../../api/staff'
import * as echarts from 'echarts'
import { deleteBatch, deleteOne } from '../../../api/city'
import { right } from 'core-js/internals/array-reduce'
import { mapState } from 'vuex'
import { configList } from '@/api/config'
import { examineSave, examineGet } from '@/api/examine'
export default {
  name: 'City',
  data () {
    return {
      option: {
        title: {
          text: ''
        },
        legend: {
          data: ['绩效分数']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 }

          ]
        },
        series: [
          {
            name: '',
            type: 'radar',
            data: [
              {
                value: [],
                name: 'Allocated Budget'
              }
            ]
          }
        ]
      },
      staff: {
        age: '',
        address:'',
        name:'',
        sex:'',
        birthday:'',
        phone:'',
        email:'',
        idCard:'',
        department:'',
        position:'',
        entryTime:'',
        leaveTime:'',
        state:'',
        ethnic:'',
        education:'',
        graduateSchool:'',
        jobTitle:'',
        professionalName:'',
        workTime:'',
        roadTime:''
      },
      userOptions: [],
      gradeOptions: [],
      selectedUser: null,
      selectedBasic: null,
      examineOptions: [{
        value: 1,
        label: '政治表现'
      }, {
        value: 2,
        label: '综合素质'
      }, {
        value: 3,
        label: '专业素质'
      }, {
        value: 4,
        label: '业绩成果'
      }, {
        value: 5,
        label: '日常表现'
      }, {
        value: 6,
        label: '考核项点'
      }],
      pictureShow: false,
      dialogForm: {
        type: 'add', // add为新增，edit为编辑
        isShow: false,

        formData: {
          basicParam: '',
          userName: '',
          configTime: '',
          configId: ''
        }
      },
      searchForm: {
        formData: {}
      },
      configArray: [],
      table: {
        tableData: [],
        pageConfig: {
          total: 10, // 记录总数
          current: 1, // 起始页
          size: 10 // 每页展示的记录数
        },
        ids: []
      }
    }
  },
  watch: {
    pictureShow (val) {
      if (val) {
        this.$nextTick(() => {
          this.initChart()
        })
      }
    },
    selectedUser (val) {
      const selectedItem = this.userOptions.find(item => item.id === val)
      this.dialogForm.formData.userName = selectedItem.name
      this.dialogForm.formData.userId = selectedItem.id
    },
    selectedBasic (val) {
      const selectedItem = this.gradeOptions.find(item => item.id === val)
      this.dialogForm.formData.configId = selectedItem.id
      this.dialogForm.formData.configRate = selectedItem.configScore
      this.dialogForm.formData.configName = selectedItem.configName
    }
  },
  computed: {
    ...mapState('token', ['token']),
    headers () {
      return { token: this.token }
    }
  },
  methods: {
    right,
    // 点击新增按钮，弹出对话框
    handleAdd () {
      this.dialogForm.isShow = true
      this.dialogForm.type = 'add'
      this.dialogForm.formData = {}
    },
    getUserList () {
      getList({
        current: 1,
        size: 10
      }, {}).then(response => {
        if (response.code === 200) {
          this.userOptions = response.data.list
        } else {
          this.$message.error(response.message)
        }
      })
    },
    handleDelete (id) {
      deleteOne(id).then(
        response => {
          if (response.code === 200) {
            this.$message.success('删除成功！')
            this.loading()
          } else {
            this.$message.error('删除失败！')
          }
        }
      )
    },
    handleDeleteBatch () {
      deleteBatch(this.ids).then(response => {
        if (response.code === 200) {
          this.$message.success('批量删除成功！')
          this.loading()
        } else {
          this.$message.error('批量删除失败！')
        }
      })
    },
    handleEdit (row) {
      this.option.radar.indicator = []
      this.option.series[0].data[0].value = []
      this.pictureShow = true
      this.dialogForm.formData = row
      this.staff = row.staff
      for (let i = 1; i <= 50; i++) {
        const configName = `configName${i}`
        const configRate = `configRate${i}`
        if (row[configName] && row[configRate]) { // 检查属性是否存在
          this.option.radar.indicator.push({
            name: row[configName],
            max: 10
          })
          this.option.series[0].data[0].value.push(row[configRate])
        }
      }
      // this.option.radar.indicator = row
      debugger
    },
    confirm () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          // 通过type来判断是新增还是编辑
          if (this.dialogForm.type === 'add') {
            examineSave(this.dialogForm.formData).then((response) => {
              if (response.code === 200) {
                this.$message.success('添加成功！')
                this.dialogForm.isShow = false
              } else {
                this.$message.error('添加失败！')
              }
            })
          }
        }
      })
    },
    search () {
      this.getExamineList()
    },
    // 重置搜索表单
    reset () {
      this.searchForm.formData = {}
      this.getExamineList()
    },
    handleSizeChange (size) {
      this.table.pageConfig.size = size
      this.getExamineList()
    },
    handleCurrentChange (current) {
      this.table.pageConfig.current = current
      this.getExamineList()
    },
    handleSelectionChange (list) {
      this.ids = list.map(item => item.id)
    },
    getParam (e) {
      console.log(e)
      this.dialogForm.formData.basicParam = e
      this.getConfigList()
    },
    getExamineList () {
      examineGet({}).then(res => {
        if (res.code === 200) {
          this.table.tableData = res.data
        }
      })
    },
    initChart () {
      const chartDom = document.getElementById('chart')
      if (chartDom) {
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.option)
      }
    },
    getConfigList () {
      const param = {
        type: this.dialogForm.formData.basicParam
      }
      configList(param).then(res => {
        if (res.code === 200
        ) {
          this.gradeOptions = res.data
        }
      })
    }
  },
  created () {
    this.getUserList()
    this.getExamineList()
  }

}
</script>
